<template>
  <div class="z-split-page" ref="ZSplitPage">
    <z-table v-loading="loading" @row-click="onRowClick" v-bind="$attrs" v-on="$listeners" />
    <div v-if="row" class="z-bottom" :style="widthStyle">
      <z-icon icon="el-icon-close" :size="24" class="close" @click="onClose" />
      <slot name="detail" :row="row"> </slot>
    </div>
  </div>
</template>
<script>
import ZIcon from "./ZIcon.vue";
import ZTable from "./ZTable";
export default {
  name: "ZSplitList",
  components: {
    ZTable,
    ZIcon,
  },
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      row: null,
      maxHeight: 0,
    };
  },
  mounted() {
    setTimeout(() => (this.maxHeight = this.$refs.ZSplitPage.clientHeight), 0);
  },
  computed: {
    widthStyle() {
      return this.$store.state.system.isCollapse ? "left:200px" : "left:60px";
    },
  },
  methods: {
    onRowClick(row) {
      if (this.$scopedSlots.detail) {
        // this.maxHeight = this.$refs.ZSplitPage.clientHeight - 400;
        this.row = row;
        this.$emit("row-click", row);
      }
    },
    onClose() {
      this.row = null;
      // this.maxHeight = this.$refs.ZSplitPage.clientHeight;
    },
  },
};
</script>
<style lang="scss" scoped>
.z-split-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.z-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 400px;
  padding: 15px 16px 10px;
  background: #fff;
  border-top: 1px solid dimgray;
  transition: all 0.3s;

  .close {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
  }
}
</style>
